<template>
    <div>
      <!--我的地址表格-->
      <el-table
        :data="addressData"
        style="width: 100%">
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话">
        </el-table-column>
        <el-table-column
          prop="isDefault"
          label="操作"
          align="right">
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              @click="handleAdd">新增</el-button>
          </template>

          <template slot-scope="scope">
            <!--设置默认收货地址的单选按钮-->
            <el-switch
              v-model="scope.row.isDefault"
              @change="setDefault(scope.$index, scope.row)"
              active-color="#13ce66"
              inactive-color="#C0C4CC">
            </el-switch>
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增地址对话框-->
      <div>
        <el-dialog
          title="新增地址"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose">
          <el-form label-position="right" label-width="80px" :model="newAddress">
            <el-form-item label="地址">
              <el-input v-model="newAddress.address"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="newAddress.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="newAddress.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onAdd">添加地址</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>

      <!--修改地址对话框-->
      <div>
        <el-dialog
          title="修改地址"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose">
          <el-form label-position="right" label-width="80px" :model="updateAddress">
            <el-form-item label="地址">
              <el-input v-model="updateAddress.address"></el-input>
            </el-form-item>
            <el-form-item label="名称">
              <el-input v-model="updateAddress.name"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="updateAddress.phone"></el-input>
            </el-form-item>
            <!--<el-form-item label="默认">-->
              <!--<el-input v-model="updateAddress.isDefault"></el-input>-->
            <!--</el-form-item>-->
            <el-form-item>
              <el-button type="primary" @click="update">修改地址</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </div>
</template>

<script>
    export default {
        name: "MyAddress",
      inject: ['reload'],
      data() {
        return {
          dialogVisible1: false,  //新增弹出框
          dialogVisible2: false,  //修改弹出框
          addressData: [],    // 获取用户地址记录
          // 新增地址信息
          newAddress: {
            address: '',
            name: '',
            phone: ''
          },
          //修改地址信息
          updateAddress: {
            id: null, //要修改的id
            address: '',
            name: '',
            phone: '',
            isDefault: Boolean
          }
        }
      },
      // 获取用户地址列表
      created() {
        this.$axios.get("/user/address", {
          params: {
            id: this.$store.state.user.id
          }
        })
          .then(response => {
            // console.log(response);
            if (response.data.success) {
              console.log("get address list success");
              this.addressData=response.data.address_list;
            }
          })
          .catch(error => {
            console.log(error);
          })
      },
      methods: {
        // 新增
        handleAdd: function () {
          this.dialogVisible1 = true;
        },
        //修改
        handleEdit(index, row) {
          this.updateAddress.id=row.id;
          this.updateAddress.address=row.address;
          this.updateAddress.name=row.name;
          this.updateAddress.phone=row.phone;
          this.updateAddress.isDefault=row.isDefault;
          // console.log(this.updateAddress.id);
          this.dialogVisible2=true;
        },
        //删除
        handleDelete(index, row) {
          // console.log(index, row);
          console.log(index);
          this.$confirm('确认删除这条地址记录？')
            .then(_ => {
              this.$axios({
                method: 'get',
                url: '/user/address/delete',
                params: {
                  addId: row.id
                }
              })
                .then(response => {
                  if (response.data.success) {
                    console.log(response.data.message);
                  } else {
                    console.log(response.data.message);
                  }
                })
                .catch(error => {console.log(error)});
            })
            .catch(_ => {});
        },
        //设置默认地址
        setDefault(index, row) {
          console.log("设置 " + row.address + " 为默认地址");
          this.axios({
            method: 'get',
            url: '/user/defaultadd',
            params: {
              addId: row.id
            }
          })
            .then(response => {
              if (response.data.success) {
                console.log(response.data.message);
                this.reload();
              } else {
                console.log(response.data.message);
              }
            })
            .catch(error => {
              console.log(error);
            });

        },
        //关闭新增地址弹框
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     done();
          //   })
          //   .catch(_ => {});
          done();
        },
        // 新增地址
        onAdd() {
          this.$axios({
            method: 'post',
            url: '/user/newaddress',
            data: {
              userId: this.$store.state.user.id,
              address: this.newAddress.address,
              name: this.newAddress.name,
              phone: this.newAddress.phone,
              isDefault: false,
              createTime: new Date().getTime()
            }
          })
            .then(response => {
              if (response.data.success) {
                console.log(response.data.message);
              } else {
                console.log(response.data.message);
              }
            })
            .catch(error => {
              console.log(error);
            });
          this.reload();
          this.dialogVisible1=false;
        },
        //修改
        update(){
          console.log("update address");
          this.$axios({
            method: 'post',
            url: '/user/updateaddress',
            data: {
              id: this.updateAddress.id,
              address: this.updateAddress.address,
              name: this.updateAddress.name,
              phone: this.updateAddress.phone,
              isDefault: this.updateAddress.isDefault,
              modifyTime: new Date().getTime()
            }
          })
            .then(response => {
              // console.log(response);
              if (response.data.success) {
                console.log(response.data.message);
                this.reload();
              } else {
                console.log(response.data.message);
              }
            })
            .catch(error => {
              console.log(error);
            });
          this.dialogVisible2 = false;

        }
      }
    }
</script>

<style scoped>

</style>
